<template>
  <el-form :rules="rules" :model="form" ref="memberDetail">
    <el-table border :data="[memberDetail]" class="el-table-align-center">
      <el-table-column width="120" label="姓名">
        <template slot-scope="{row}">
          {{row.reallyName}}
        </template>
      </el-table-column>
      <el-table-column width="100" label="玩家层级">
        <template slot-scope="{row}">
          {{row.levelName}}
        </template>
      </el-table-column>
      <el-table-column prop="status" width="100" label="状态">
        <template slot-scope="{row,$index}">
          <member-status-tag :status="row.status"/>
        </template>
      </el-table-column>
      <el-table-column prop="parentName" label="上级代理">
        <template slot-scope="{row}">
          {{row.parentName}}
        </template>
      </el-table-column>
      <el-table-column width="150" label="号码归属地">
        <template slot-scope="{row}">
          <el-form-item prop="telArea" v-if="editAreaFlag">
            <!-- <el-input v-model="form.telArea" auto-complete="off"></el-input> -->
            <el-select
              v-model="form.telArea" placeholder="请选择号码归属地">
              <el-option :label="'大陆+86'" :value="86"></el-option>
              <el-option :label="'澳门+853'" :value="853"></el-option>
              <el-option :label="'香港+852'" :value="852"></el-option>
              <el-option :label="'台湾+886'" :value="886"></el-option>
            </el-select>
          </el-form-item>
          <div v-else>{{row.telArea}}</div>
          <!-- <el-button type="text" @click="editAreaFlag = !editAreaFlag" v-if="!editAreaFlag">修改</el-button> -->
          <el-button type="text" @click="editArea('telArea', row)" v-if="!editAreaFlag">修改</el-button>
        </template>
      </el-table-column>

      <el-table-column width="150" label="手机号码">
        <template slot-scope="{row}">
          <el-form-item prop="telephone" v-if="editPhoneFlag">
            <el-input v-model="form.telephone" auto-complete="off"></el-input>
          </el-form-item>
          <div v-else>{{row.telephone}}</div>
          <!-- <el-button type="text" @click="editPhoneFlag = !editPhoneFlag" v-if="!editPhoneFlag">修改</el-button> -->
          <el-button type="text"  @click="editArea('telephone', row)" v-if="!editPhoneFlag">修改</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="birthday" width="180" label="出生日期">
        <template slot-scope="{row}">
          {{row.birthday}}
        </template>
      </el-table-column>
      <el-table-column label="性别">
        <template slot-scope="{row}">
          <span v-if="row.sex == 1">男</span>
          <span v-else-if="row.sex == 2">女</span>
          <span v-else>未知</span>
        </template>
      </el-table-column>
      <el-table-column prop="email" width="180" label="邮箱">
        <template slot-scope="{row}">
          <el-form-item prop="email" v-if="editEmailFlag">
            <el-input v-model="form.email" auto-complete="off"></el-input>
          </el-form-item>
          <div v-else>{{row.email}}</div>
          <!-- <el-button type="text" @click="editEmailFlag = !editEmailFlag" v-if="!editEmailFlag">修改</el-button> -->
          <el-button type="text"  @click="editArea('email', row)" v-if="!editEmailFlag">修改</el-button>
        </template>
      </el-table-column>
      <!--<el-table-column props="address" width="200" label="地址">-->
      <!--<template slot-scope="{row}">-->
      <!--<el-form-item prop="address" v-if="editAble" :required="false">-->
      <!--<el-input v-model="row.address" auto-complete="off"></el-input>-->
      <!--</el-form-item>-->

      <!--<div v-else>{{row.address}}</div>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column prop="registerDate" width="180" label="注册时间">
        <template slot-scope="scope">
          {{memberDetail.registerDate | toTime}}
        </template>
      </el-table-column>
      <el-table-column prop="registerIp" width="150" label="注册IP">
      </el-table-column>
      <el-table-column label="上次登录时间" align="center" width="200">
        <template slot-scope="{row}">
          {{row.loginTime | toTime}}
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-button type="primary" :disabled="disabled" @click="submitForm">申请修改</el-button>
      <el-button @click="resetFunc">取消
      </el-button>
    </div>
  </el-form>
</template>

<script>
import { getMemberDetail } from '@/services/api/member';
import MemberStatusTag from '@/components/MemberStatusTag';
import { resetForm, factory, form } from '@/build';
import ApplyDialog from '@/views/member/list/applyDialog';

export default {
  name: 'edit-member-info',
  props: {
    'member-id': {
      type: Number,
    },
    // //切换成带输入可编辑状态
    // 'edit-able': {
    //   type: Boolean,
    //   default: false
    // }
  },
  mixins: [resetForm, form],
  components: { ApplyDialog, MemberStatusTag },
  data() {
    return {
      phoneState: '',
      codeState: '',
      memberDetail: {},
      loading: false,
      isApply: false,
      editPhoneFlag: false,
      editEmailFlag: false,
      editAreaFlag: false,
      form: {
        email: '',
        telephone: '',
        telArea: '',
      },
      rules: {
        name: [
          { required: true, message: '用户姓名不能为空', trigger: 'change' },
          {
            min: 2, max: 10, message: '用户姓名长度不对', trigger: 'change',
          },
        ],
        // telephone: [
        //   {validator: factory.getValidator('mobile', {required: true}), trigger: 'blur'}
        // ],
        email: [
          { validator: factory.getValidator('email', { required: true }), trigger: 'blur' },
        ],
      },
    };
  },
  computed: {
    disabled() {
      return !this.form.email && !this.form.telephone && !this.form.telArea;
    },
  },
  mounted() {
    const phoneShowPartial = this.roleCheck('phone-show-partial');
    const phoneShowAll = this.roleCheck('phone-show-all');
    const emailShowPartial = this.roleCheck('email-show-partial');
    const emailShowAll = this.roleCheck('email-show-all');
    this.bindGet(getMemberDetail, 'memberDetail', {
      sendingData: { userId: this.$store.state.member.member_id },
      format: (data) => {
        data.telephone = _.formatUserPhoneEmail(data.telephone, phoneShowPartial, phoneShowAll);
        data.email = _.formatUserPhoneEmail(data.email, emailShowPartial, emailShowAll);
        if (data.telArea == '') {
          data.telArea = 86;
        } else {
          data.telArea;
        }
        this.form.telArea = data.telArea;
        return data;
      },
    });
    this.getAll();
  },
  watch: {

  },
  methods: {
    editArea(k, v) {
      if (k == 'telArea') {
        this.editAreaFlag = true;
        this.form.telArea = v.telArea;
      } else if (k == 'telephone') {
        this.editPhoneFlag = true;
        this.form.telArea = this.form.telArea;
        // this.form['telArea'] = v.telArea
        this.form.telephone = v.telephone;
      } else {
        this.editEmailFlag = true;
        this.form.email = v.email;
      }
    },

    submitForm() {
      // let phone=JSON.parse(JSON.stringify(this.phoneState));
      // let code=this.codeState;
      this.$refs.memberDetail.validate((valid) => {
        if (valid) {
          const params = { userId: this.$store.state.member.member_id };
          if (this.form.telephone) params.telephone = this.form.telephone;
          if (this.form.email) params.email = this.form.email;
          if (this.form.telArea) params.telArea = this.form.telArea;

          if ((this.editAreaFlag || this.editPhoneFlag) && !this.form.telephone && this.form.telArea) {
            this.$notify.error({
              message: '未设置手机号，不能修改',
            });
          } else {
            this.$store.commit(types.SHOW_APPLY_MODAL, {
              data: params,
              from: 'memberInfo',
            });
          }
        }
      });
    },
    resetFunc() {
      this.resetForm('memberDetail');
      this.editPhoneFlag = false;
      this.editEmailFlag = false;
      this.editAreaFlag = false;
      this.form.telephone = '';
      this.form.email = '';
      this.form.telArea = '';
    },
  },

};
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }

  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
